<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1"
		/>
		<title>移动端适配</title>
		<link rel="stylesheet" href="css/reset.min.css" />
		<link rel="stylesheet" href="css/icon.min.css" />
		<link rel="stylesheet" href="css/app.min.css" />
		<script src="js/rem.js"></script>
		<script type="module">
			rem();
		</script>
	</head>
	<body>
		<!-- 顶栏开始 -->
		<header class="nav-wrapper">
			<div class="nav-content">
				<i class="icon icon-logo"></i>
				<div class="input">
					<i class="icon icon-search"></i>
					<p>寻找宝贝店铺</p>
				</div>
			</div>
		</header>
		<!-- 顶栏结束 -->

		<section class="content-wrapper">
			<div class="content">
				<nav>
					<div class="banner">
						<img src="images/轮播.jpg" class="bannerItem" alt="" />
					</div>
					<div class="navBox">
						<div class="topRadius"></div>
						<div class="itemBox">
							<ul>
								<li class="navItem">
									<img src="images/天猫新品.png" alt="" class="icon" />
									<p class="text">天猫新品</p>
								</li>
								<li class="navItem">
									<img src="images/今日爆款.png" alt="" class="icon" />
									<p class="text">今日爆款</p>
								</li>
								<li class="navItem">
									<img src="images/天猫国际.png" alt="" class="icon" />
									<p class="text">天猫国际</p>
								</li>
								<li class="navItem">
									<img src="images/饿了么.png" alt="" class="icon" />
									<p class="text">饿了么</p>
								</li>
								<li class="navItem">
									<img src="images/天猫超市.png" alt="" class="icon" />
									<p class="text">天猫超市</p>
								</li>
								<li class="navItem">
									<img src="images/充值中心.png" alt="" class="icon" />
									<p class="text">充值中心</p>
								</li>
								<li class="navItem">
									<img src="images/机票酒店.png" alt="" class="icon" />
									<p class="text">机票酒店</p>
								</li>
								<li class="navItem">
									<img src="images/金碧庄园.png" alt="" class="icon" />
									<p class="text">金碧庄园</p>
								</li>
								<li class="navItem">
									<img src="images/阿里拍卖.png" alt="" class="icon" />
									<p class="text">阿里拍卖</p>
								</li>
								<li class="navItem">
									<img src="images/淘宝吃货.png" alt="" class="icon" />
									<p class="text">淘宝吃货</p>
								</li>
							</ul>
							<div class="scrollBar">
								<span class="scrollThumb"></span>
							</div>
						</div>
					</div>
				</nav>

				<section class="productWrapper">
					<ul>
						<li class="product">
							<img src="images/1.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代123213213213</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/2.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/3.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/4.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/5.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/6.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/7.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/8.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/9.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
						<li class="product">
							<img src="images/10.jpg" alt="" class="pro-img" />
							<div class="pro-content">
								<h5>欧派整体橱柜定制简约现代</h5>
								<p class="oldPrice">￥2000.00</p>
								<div class="pcBox">
									<p class="price"><span class="char">￥</span>1000</p>
									<p class="count">985已售</p>
								</div>
							</div>
						</li>
					</ul>
				</section>
			</div>
		</section>

		<!-- tabbar开始 -->
		<div class="tabbar-wrapper">
			<div class="tabbar-content">
				<ul>
					<li class="tabItem">
						<i class="icon icon-home-select"></i>
						<p class="text">首页</p>
					</li>
					<li class="tabItem">
						<i class="icon icon-shoppingcar"></i>
						<p class="text">购物车</p>
					</li>
					<li class="tabItem">
						<i class="icon icon-order"></i>
						<p class="text">订单列表</p>
					</li>
					<li class="tabItem">
						<i class="icon icon-my"></i>
						<p class="text">个人中心</p>
					</li>
					<li class="tabItem">
						<i class="icon icon-more"></i>
						<p class="text">更多</p>
					</li>
				</ul>
			</div>
		</div>
		<!-- tabbar结束 -->
	</body>
</html>
